<template>
  <div class="admin-settings">
    <el-card>
      <template #header>
        <span>系统设置</span>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本设置" name="basic">
          <el-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="120px"
            style="max-width: 600px;"
          >
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="basicForm.systemName" />
            </el-form-item>
            
            <el-form-item label="系统描述" prop="systemDescription">
              <el-input
                v-model="basicForm.systemDescription"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
            
            <el-form-item label="客服电话" prop="servicePhone">
              <el-input v-model="basicForm.servicePhone" />
            </el-form-item>
            
            <el-form-item label="客服邮箱" prop="serviceEmail">
              <el-input v-model="basicForm.serviceEmail" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="updateBasicSettings" :loading="loading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="任务设置" name="task">
          <el-form
            ref="taskFormRef"
            :model="taskForm"
            :rules="taskRules"
            label-width="120px"
            style="max-width: 600px;"
          >
            <el-form-item label="任务审核" prop="taskReview">
              <el-switch v-model="taskForm.taskReview" />
              <span class="form-tip">开启后新发布的任务需要审核</span>
            </el-form-item>
            
            <el-form-item label="最低奖励" prop="minReward">
              <el-input-number
                v-model="taskForm.minReward"
                :min="0"
                :precision="2"
              />
            </el-form-item>
            
            <el-form-item label="最高奖励" prop="maxReward">
              <el-input-number
                v-model="taskForm.maxReward"
                :min="0"
                :precision="2"
              />
            </el-form-item>
            
            <el-form-item label="任务有效期" prop="taskValidityDays">
              <el-input-number
                v-model="taskForm.taskValidityDays"
                :min="1"
                :max="365"
              />
              <span class="form-tip">天</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="updateTaskSettings" :loading="loading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="安全设置" name="security">
          <el-form
            ref="securityFormRef"
            :model="securityForm"
            :rules="securityRules"
            label-width="120px"
            style="max-width: 600px;"
          >
            <el-form-item label="登录超时" prop="loginTimeout">
              <el-input-number
                v-model="securityForm.loginTimeout"
                :min="5"
                :max="1440"
              />
              <span class="form-tip">分钟</span>
            </el-form-item>
            
            <el-form-item label="密码策略" prop="passwordPolicy">
              <el-checkbox-group v-model="securityForm.passwordPolicy">
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="最小密码长度" prop="minPasswordLength">
              <el-input-number
                v-model="securityForm.minPasswordLength"
                :min="6"
                :max="32"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="updateSecuritySettings" :loading="loading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')
const loading = ref(false)

const basicFormRef = ref()
const taskFormRef = ref()
const securityFormRef = ref()

const basicForm = reactive({
  systemName: '校事达任务管理系统',
  systemDescription: '让校园生活更便捷的任务管理平台',
  servicePhone: '6666666',
  serviceEmail: 'service@xsd.com'
})

const taskForm = reactive({
  taskReview: false,
  minReward: 0,
  maxReward: 1000,
  taskValidityDays: 30
})

const securityForm = reactive({
  loginTimeout: 30,
  passwordPolicy: ['lowercase', 'number'],
  minPasswordLength: 6
})

const basicRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' }
  ],
  servicePhone: [
    { required: true, message: '请输入客服电话', trigger: 'blur' }
  ],
  serviceEmail: [
    { required: true, message: '请输入客服邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

const taskRules = {
  minReward: [
    { required: true, message: '请输入最低奖励', trigger: 'blur' }
  ],
  maxReward: [
    { required: true, message: '请输入最高奖励', trigger: 'blur' }
  ]
}

const securityRules = {
  loginTimeout: [
    { required: true, message: '请输入登录超时时间', trigger: 'blur' }
  ],
  minPasswordLength: [
    { required: true, message: '请输入最小密码长度', trigger: 'blur' }
  ]
}

const updateBasicSettings = async () => {
  if (!basicFormRef.value) return
  
  await basicFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 这里应该调用API保存设置
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('基本设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      } finally {
        loading.value = false
      }
    }
  })
}

const updateTaskSettings = async () => {
  if (!taskFormRef.value) return
  
  await taskFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 这里应该调用API保存设置
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('任务设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      } finally {
        loading.value = false
      }
    }
  })
}

const updateSecuritySettings = async () => {
  if (!securityFormRef.value) return
  
  await securityFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 这里应该调用API保存设置
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('安全设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      } finally {
        loading.value = false
      }
    }
  })
}

onMounted(() => {
  // 初始化设置数据
})
</script>

<style scoped>
.admin-settings {
  padding: 20px;
}

.form-tip {
  margin-left: 10px;
  color: #999;
  font-size: 12px;
}
</style>
